<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      section {
        width: 100px;
        height: 200px;
        background-color: blue;
        /* transform-origin: -50px -50px; */
        transition: 2s;
      }
      div:hover section {
        transform: translate(100px, 0) rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div>
      <section></section>
    </div>
  </body>
</html>

<!-- 
  含义 : 指的是 元素能在平面上面进行旋转的动画

    ​	基本属性 : transform : rotateX(deg)  /  rotateY(deg)  /  rotate(deg)

    ​	释义 : 

    ​		rotateX() : 元素绕着X轴进行旋转 ; 类似于 : 烤全羊 , 水井上面的辘辘

    ​		rotateY() : 元素绕着Y轴进行旋转 ; 类似于 : 吊炉烤鸭 ; 

    ​		rotate() :   元素绕着中心点进行旋转 ; 中心点 ( 位于元素正中心位置 )


  属性 : transform-origin : x y;   x代表的是水平位置,  y代表的是垂直位置;  旋转中心可以再元素内部, 也可以位于元素外边


  一般情况下，既有平移又有旋转的时候，要先写平移，再写旋转
  因为旋转会改变x轴和y轴的方向
 -->
